<template>
  <Modal v-model="userToRoleModalVisible" width="800">
    <template #header>
      <div>
        <span style="font-size: 16px;font-weight: bold">分配用户</span>
      </div>
    </template>
    <div style="padding: 8px 16px">
      <Transfer
          style="display: flex;justify-content: center;align-items: center"
          :titles='["未分配用户","已分配用户"]'
          :list-style="{flexGrow: 1}"
          :data="transferData"
          :target-keys="targetKeys"
          filterable
          :filter-method="filterMethod"
          @on-change="handleChange"></Transfer>
    </div>

    <template #footer>
      <Button type="default" @click="userToRoleModalVisible=false">取消</Button>
      <Button type="primary" @click="UserToRole">确定</Button>
    </template>
  </Modal>
</template>
<script setup>
import {useRoleStore} from "@/module-base/stores/roleStore.js";
import {addUserToRole} from '@/module-base/api/sysManage.js'
import {Message} from 'view-ui-plus'
import {storeToRefs} from "pinia";
import {onMounted, ref} from "vue";
const roleStore=useRoleStore()
const {closeUserToRoleModal}=roleStore
const {userToRoleModalVisible,transferData,targetKeys,modalRoleId}=storeToRefs(roleStore)

onMounted(async ()=>{
})
function handleChange (newTargetKeys) {
  targetKeys.value = newTargetKeys;
}
function filterMethod (data, query) {
  return data.label.indexOf(query) > -1;
}

/**
 * 添加用户到角色*/
async function UserToRole(){
  console.log(modalRoleId.value);
  console.log(targetKeys.value);
  const rs=await addUserToRole({
    roleId:modalRoleId.value,
    userIds:targetKeys.value
  })
  if(rs.success){
    Message.success('分配成功')
  }else {
    Message.error('分配失败')
  }
  closeUserToRoleModal()
}
</script>
<style scoped>

</style>